<!--
 * @Author: Pure <305737824@qq.com>
 * @CreateTime: 2021-12-29 14:11:47
 * @LastEditors: Pure <305737824@qq.com>
 * @LastEditTime: 2021-12-29 16:11:32
 * @Description:工单看板
-->
<template>
  <div class="pure-kanban">
    <div class="header flex space-between">
      <span class="label">工单</span>
      <span class="count">1/2</span>
    </div>
    <div class="body">
      <div

        class="card inactived expired"
        @mouseover="onMouseOver"
      >
        <div class="desc">工单描述</div>
        <div class="flex space-between">
          <span class="time-container">接单时间<span>2021-12-08</span></span>
          <span class="degree degree--1">非常紧急</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'KanbanTicket',
  data() {
    return {
      ticketList: [1, 2],
      fuck: ['inactived'],
    };
  },
  methods: {
    onMouseOver() {
      this.fuck = ['actived'];
      console.log('fuck');
    },
  },
};
</script>

<style lang="scss" scoped>
.pure-kanban {
  background: white;
  padding: 10px 12px;
  .header {
    align-items: center;
    .label {
      font-size: 20px;
      color: white;
      background: #3DCC9C;
      display:inline-block;
      padding: 5px;
      border-radius: 2px;
    }
    .count {
      font-size: $--pure-base-font-size;
      line-height: 20px;
    }
  }
  .body {
    .inactived {
      height: 134px;
      &+.inactived {
        margin-top: 24px;
      }
    }
    .actived {
      height: 180px;
    }
    .card {
      border: 1px solid #f0f1f5;
      border-radius: 2px;
      width: 316px;
      padding: 16px 24px;
      .desc {
        font-size: 20px;
        color: #334266;
        margin-bottom: 20px;
      }
      .time-container {
        padding: 5px;
        border-radius:2px;
        background: #F5F5F5;
        color: #7D8DB3;
        font-size: $--pure-little-font-size;
        span {
          color: #334266;
        }
      }
    }
  }
}
.degree {
  padding: 5px 10px;
  font-size: $--pure-little-font-size;
  &--1 {
    background: rgba(245,108,108,0.08);
    color: #F06A6A;
  }
}
.expiring {
  border-left: 5px solid #E6A23C !important;
}
.expired {
border-left: 5px solid #F56C6C !important;
}
</style>
